<template>
  <div class="diantai banxin">
    <div class="diantai_min">
      <ul class="tanxin">
        <li v-for="(item, index) in leixin" :key="index">
          <i :style="`background-image:url(${item.picWebUrl});`"></i>
          <span>{{ item.name }}</span>
        </li>
      </ul>
      <div class="tanxin">
        <Jiemu :list="jiemulist" :name="jiemutuijianName" />
        <Jiemuc :list="jiemupaihangb" :name="jiemupaihangbn" />
      </div>
      <div>
        <Tuijiandiant :list="musiclist" />
        <Tuijiandiant :list="musiclist" />
        <Tuijiandiant :list="musiclist" />
        <Tuijiandiant :list="musiclist" />
      </div>
    </div>
  </div>
</template>

<script>
import Jiemu from "@/components/diantai/Jiemu.vue";
import Jiemuc from "@/components/diantai/Jiemu_copy.vue";
import Tuijiandiant from "@/components/diantai/Tuijiandiantai.vue";
import {
  Dianttuijian,
  Diantleixing,
  Diantaijiemutuijian,
  MusicRecommendation,
} from "@/request/api";
export default {
  data() {
    return {
      // 电台分类
      leixin: [],
      //   电台 节目推荐
      jiemulist: [],
      jiemutuijianName: "节目推荐 ",
      //   电台 排行榜
      jiemupaihangb: [],
      jiemupaihangbn: "节目排行榜",

      //   音乐推荐 电台
      musiclist: [],
    };
  },
  created() {
    Diantleixing().then((res) => {
      if (res.data.code === 200) {
        this.leixin = res.data.categories;
      }
    });
    Dianttuijian().then((res) => {
      if (res.data.code === 200) {
        this.jiemulist = res.data.programs;
      }
    });
    Diantaijiemutuijian().then((res) => {
      this.jiemupaihangb = res.data.toplist;
    });
    MusicRecommendation().then((res) => {
      if (res.data.code === 200) {
        this.musiclist = res.data.djRadios;
      }
    });
  },
  components: {
    Jiemu,
    Jiemuc,
    Tuijiandiant,
  },
};
</script>
 
<style lang = "less" scoped>
@import "@/assets/base.less";
.diantai {
  background-color: #fff;
  margin-top: 20px;

  .diantai_min {
    margin-left: 100px;
    ul {
      height: 194px;
      justify-content: flex-start;
      flex-wrap: wrap;
      overflow: hidden;
      margin-bottom: 20px;
      li {
        width: 70px;
        height: 72px;
        margin-top: 20px;
        margin-right: 40px;
        text-align: center;
        &:last-of-type {
          margin-right: 0;
        }
        i {
          display: block;
          width: 48px;
          height: 48px;
          background-image: url("@/assets/images/icon123.png");
          background-position: 5px 0;
          background-size: 1;
        }
        span {
          font-size: 14px;
          color: #bbb;
        }
      }
    }
  }
}
</style>